<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/cart.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<div class="littletop"></div>
				<div class="navtitle">
					<div class="title">
						<a href="##" class="logo">
							<img src="img/logo.png" />
						</a>
						<div class="titlelist">
							<ul>
								<li>
									<a href="##">首页</a>
								</li>
								<li>
									<a href="##">手机数码</a>
								</li>
								<li>
									<a href="##">电脑办公</a>
								</li>
								<li>
									<a href="##">衣服用品</a>
								</li>
								<li>
									<a href="##">购物车</a>
								</li>
							</ul>
						</div>
						<div class="tatoo">
							<ul>
								<li>
									<a href="##" class="search">
										<i class="icon-search"></i>
										<input type="text" value="搜索" name="search" />
									</a>
								</li>
								<li>
									<a href="##" class="login">
										<i class="icon-login"></i>
										<span>登录</span>
									</a>
								</li>
								<li>
									<a href="##" class="cart">
										<i class="icon-cart"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content">
			<div class="section">
				<ul>
					<li>
						<i style="background-color: #1428a0;">1</i>
						<a style="color: #1428a0;">查看购物车</a>
					</li>
					<li>
						<i>2</i>
						<a>确认订单信息</a>
					</li>
					<li>
						<i>3</i>
						<a>提交并付款</a>
					</li>
				</ul>
			</div>
			<div class="shopcart">
				<div class="shopcarttitle">
					<span>购物车</span>
				</div>
				<div class="shopcartlisttitle">
					<i></i>
					<ul>
						<li>
							<a style="margin-left: -115px;">商品</a>
						</li>
						<li>
							<a>单价</a>
						</li>
						<li>
							<a>获得积分</a>
						</li>
						<li>
							<a>数量</a>
						</li>
						<li>
							<a>金额</a>
						</li>
					</ul>
					</div>
					<div class="shopcartlist">
						<div class="cartlist">
							<i class="iconchecked"></i>
							<div class="cartinfo">
    							<div class="shopcartgoods">
        							<div class="shopcartleftimg">
            							<a href="##">
                							<img src="img/phone.jpg" alt="" style="width: 100px;height: 100px;">
            							</a>
        							</div>
        							<a href="##" class="info">Galaxy A6s
            							<p>花木蓝&nbsp;6GB RAM
                						<br>64GB ROM&nbsp;公开版&nbsp;</p>
        							</a>
    							</div>
    							<div class="unitdiscount">
        							<p style="color:#363d4c;font-weight: normal;">¥1,799.00</p>
    							</div>
    							<div class="shopcartjifen">1799</div>
    							<div class="shopcartqty">
        							<div class="calculatenum">
            							<a class="qtybtnleft">
                							<i class="minus"></i>
            							</a>
            							<input class="qtyinput" type="text" origindata="1" value="1">
            							<a class="qtybtnright">
                							<i class="leftplus"></i>
            							</a>
        							</div>
        							<a class="shopcartremove">删除</a>
    							</div>
    							<div class="shopcart-sum shopcart-sum-discount">
        							<p style="color:#363d4c;font-weight: normal;">¥1,799.00</p>
    							</div>
							</div>
						</div>
					</div>
					<div class="sumbox">
						<label class="floatleft">
							<i class="shopcar"></i>
							全场免运费，下单后1~2天内发货（预售等特殊情况除外）
						</label>
						<div class="shopcostsum">
						<div>
							<span class="sumtitle">总计</span>
							<span class="sumnum">¥0.00</span>
					      </div>
					      <div>
					       <span class="sumtitle">获得积分</span>
					       <span class="sumnum">0</span>
						</div>
						</div>
					</div>
					<div class="shopcartpay">
						<a href="##"class="btn">去结算</a>
						<a href="##" class="continue">
							<i class="arrow"></i>
							继续购物
						</a>
					</div>
				</div>
			</div>
			<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(".cartlist i").click(function(){
			$("#money").html("¥1799");
			$("#jifen").html(1799);
			$(this).css({
				"background-position": "-44px -408px"
			})
		})
	</script>
</html>
